<template>
	<uni-popup ref="planFormRef" type="bottom" border-radius="40rpx 40rpx 0 0">
		<view class="form-conetent">
			<view class="dot"></view>
			<view class="form-item">
				<view class="item-line">
					<view class="item-text">
						AI提醒
					</view>
					<view class="item-text">
						应用提醒
					</view>
				</view>
				<view class="item-line">
					<view class="item-text">
						前10分钟
					</view>
					<view class="item-text">
						到点提醒
					</view>
					<view class="item-text">
						不提醒
					</view>
				</view>
				<view class="item-line">
					<view class="item-text">
						重要
					</view>
					<view class="item-text">
						一般
					</view>
					<view class="item-text">
						较轻
					</view>
				</view>
				<view class="item-line">
					<view class="item-text">
						工作
					</view>
					<view class="item-text">
						社交
					</view>
					<view class="item-text">
						个人
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="item-line">
					<view class="item-text">
						一次
					</view>
					<view class="item-text">
						重复
					</view>
				</view>
				<view class="item-line">
					<view class="item-text">
						9:00
					</view>
					<view class="item-text">
						10:00
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="item-line">
					<view class="item-text">
						计划名称
					</view>
				</view>
				<view class="item-line">
					<view class="item-text">
						计划内容
					</view>
				</view>
			</view>
			<view class="btns">
				<view class="cencel-btn">
					取消
				</view>
				<view class="sure-btn">
					确定
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const planFormRef = ref(null)
	const formData = ref([

	])
	setTimeout(() => {
		// console.log(planFormRef.value)
		// planFormRef.value.open()
	}, 200)
</script>

<style lang="less" scoped>
	.form-conetent {
		position: relative;
		background-color: #fff;
		font-size: 32rpx;
		padding: 88rpx 0 136rpx;
		border-radius: 40rpx 40rpx 0 0;

		.dot {
			position: absolute;
			left: 336rpx;
			top: 20rpx;
			width: 80rpx;
			height: 8rpx;
			opacity: 1;
			border-radius: 20rpx;
			background: rgba(233, 236, 239, 1);
		}

		.form-item {
			width: 650rpx;
			border: 2rpx solid rgba(222, 226, 230, 1);
			border-radius: 40rpx;
			margin: 0 auto 64rpx;

			.item-line {
				margin: 0 auto;
				width: 550rpx;
				height: 116rpx;
				// padding: 0 50rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: 2px solid rgba(222, 226, 230, 1);

				.item-text {
					flex: 1;
					text-align: center;
				}
			}

			.item-line:last-child {
				border-bottom: none;
			}
		}

		.btns {
			display: flex;
			justify-content: center;

			.cencel-btn {
				margin-right: 62rpx;
				width: 296rpx;
				height: 76rpx;
				line-height: 76rpx;
				opacity: 1;
				border-radius: 16rpx;
				background: rgba(244, 159, 157, 1);
				font-size: 32rpx;
				letter-spacing: 0rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}

			.sure-btn {
				width: 296rpx;
				height: 76rpx;
				line-height: 76rpx;
				opacity: 1;
				border-radius: 16rpx;
				background: rgba(32, 32, 37, 1);
				font-size: 32rpx;
				letter-spacing: 0rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
		}
	}
</style>